<template>
  <div class="wrapper">
    <div class="select-wraaper">
      <!-- <div class="select-item flex-wrap" @click="showCopy = true">
        <span>考核单位：</span>
        <div>温州市xxx单位</div>
        <img src="@/assets/common/arrow-down.png" />
      </div> -->
      <div class="select-item flex-wrap" @click="showYear = true">
        <div>{{ queryForm.year }}年</div>
        <img src="@/assets/common/arrow-down.png" />
      </div>
    </div>
    <div class="list">
      <pull-refresh-list ref="objectionList" :limit="queryForm.size" :page-no.sync="queryForm.current" :data.sync="list" @getList="getPage">
        <list-item v-for="item in list" :key="item.id" :content="item" :levelList="levelList" />
      </pull-refresh-list>
    </div>

    <!-- <van-popup v-model="showCopy" position="bottom">
      <van-picker title="选择单位" show-toolbar :columns="copyColumns" @confirm="onCopyConfirm" @cancel="showCopy = false" />
    </van-popup> -->
    <van-popup v-model="showYear" position="bottom">
      <van-picker :default-index="yearIndex" title="选择年份" show-toolbar :columns="yearColumns" @confirm="onYearConfirm" @cancel="showYear = false" />
    </van-popup>
  </div>
</template>

<script>
import { getObjectionList, getYearObjectionList } from "@/api/objectionHandle";
import listItem from "./list-item.vue";
export default {
  components: {
    listItem
  },
  props: {
    isYear: {
      type: Number,
      default: 0
    },
    type: {
      type: Number,
      default: 0
    },
    levelList: {
      type: Object,
      default: () => {}
    },
    year: {
      type: Number
    }
  },
  data() {
    return {
      showCopy: false,
      showYear: false,
      copyColumns: [],
      yearColumns: [],
      list: [],
      queryForm: {
        size: 10,
        current: 1,
        dissentStatus: 0,
        year: 2022
      },
      startYear: 2020,
      yearIndex: 0
    };
  },
  watch: {
    year(val) {
      this.queryForm.year = val;
    }
  },
  created() {
    this.queryForm.dissentStatus = this.type;
    let current = new Date();
    let year = current.getFullYear();
    this.queryForm.year = this.year || year;

    for (let i = this.startYear; i <= year; i++) {
      this.yearColumns.push(i);
    }
    this.yearIndex = this.yearColumns.length - 1;
  },
  methods: {
    onCopyConfirm() {
      this.showCopy = false;
    },
    onYearConfirm(e) {
      this.$emit("update:year", e);
      this.queryForm.year = e;
      this.showYear = false;
      this.$refs.objectionList.onSearch();
    },
    getPage(callback) {
      let queryFn = this.isYear ? getYearObjectionList : getObjectionList;
      queryFn(this.queryForm).then(res => {
        callback(res.data.records);
      });
    },
    refresh() {
      this.$refs.objectionList.onSearch();
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20px 16px;
  line-height: 20px;
  color: #333333;
  font-size: 14px;
}
.select-wraaper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  .select-item span {
    color: #999999;
    margin-right: 8px;
  }
  img {
    width: 12px;
    margin-left: 8px;
  }
}
.flex-wrap {
  display: flex;
  align-items: center;
}
</style>
